<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet"/>
<link href="/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css"
      th:href="@{/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-role-add" th:object="${workTime}">
        <input type="hidden" name="id"  th:value="*{id}">
        <div class="form-group">
            <label class="col-sm-3 control-label">A.M 上班签到时间</label>
            <div class="col-sm-4">
                <input class="form-control time" readonly="readonly"  type="text"
                       th:value="*{#dates.format(attendMorStartTime,'yyyy-MM-DD HH:mm:ss')}" name="attendMorStartTime">
            </div>
            <div class="col-sm-4" >
                <input class="form-control time" readonly="readonly"  type="text"
                       th:value="*{#dates.format(attendMorendTime,'yyyy-MM-DD HH:mm:ss')}" name="attendMorendTime">
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label ">A.M 工作时间</label>
            <div class="col-sm-4" >
                <input class="form-control time" type="text" readonly="readonly"
                       th:value="*{#dates.format(workStartTimeMor,'yyyy-MM-DD HH:mm:ss')}"name="workStartTimeMor">
            </div>
            <div class="col-sm-4">
                <input class="form-control time" type="text" readonly="readonly"
                       th:value="*{#dates.format(workEndTimeMor,'yyyy-MM-DD HH:mm:ss')}" name="workEndTimeMor">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label ">A.M 下班签到时间：</label>
            <div class="col-sm-4">
                <input class="form-control time" type="text" readonly="readonly"
                       th:value="*{#dates.format(attendMorLeaveStartTime,'yyyy-MM-DD HH:mm:ss')}" name="attendMorLeaveStartTime" />
            </div>
            <div class="col-sm-4">
                <input class="form-control time" type="text" readonly="readonly"
                       th:value="*{#dates.format(attendMorLeaveEndTime,'yyyy-MM-DD HH:mm:ss')}" name="attendMorLeaveEndTime" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label ">P.M 上班签到时间：</label>
            <div class="col-sm-4">
                <input class="form-control time" readonly="readonly" type="text"
                       th:value="*{#dates.format(attendAfterNoonStartTime,'yyyy-MM-DD HH:mm:ss')}" name="attendAfterNoonStartTime" />


            </div>
            <div class="col-sm-4">
                <input class="form-control time" type="text" readonly="readonly"
                       th:value="*{#dates.format(attendAfterNoonendTime,'yyyy-MM-DD HH:mm:ss')}" name="attendAfterNoonendTime"/>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label ">P.M 工作时间：</label>
            <div class="col-sm-4">
                <input class="form-control time" readonly="readonly" type="text"
                       th:value="*{#dates.format(workStartTimeAfterNoon,'yyyy-MM-DD HH:mm:ss')}" name="workStartTimeAfterNoon" />
            </div>
            <div class="col-sm-4">
                <input class="form-control time" readonly="readonly"
                       th:value="*{#dates.format(workEndTimeAfterNoon,'yyyy-MM-DD HH:mm:ss')}" name="workEndTimeAfterNoon"/>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-3 control-label ">P.M 下班签到时间：</label>
            <div class="col-sm-4">
                <input class="form-control time"
                       th:value="*{#dates.format(attendAfterLeaveStartTime,'yyyy-MM-DD HH:mm:ss')}"  name="attendAfterLeaveStartTime" readonly="readonly"
                       type="text"
                />
            </div>

            <div class="col-sm-4">
                <input class="form-control time" readonly="readonly"
                       th:value="*{#dates.format(attendAfterLeaveEndTime,'yyyy-MM-DD HH:mm:ss')}"  name="attendAfterLeaveEndTime" id="attendAfterLeaveEndTime"/>
            </div>
        </div>


        <div class="form-group">
            <div class="form-control-static col-sm-offset-3">
               <span style="color:grey;"> *无需理会日期</span>
            </div>
            <div class="form-control-static col-sm-offset-9">
                <button type="submit" class="btn btn-primary">提交</button>
                <button onclick="$.modal.close()" class="btn btn-danger" type="button">关闭</button>
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script type="text/javascript">

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        $("#form-role-add .time").each(function(){
            laydate.render({
                elem: this
                , type: 'datetime' //使用this指向当前元素,不能使用class名, 否则只有第一个有效
            });
        })

    })


    $("#form-role-add").validate({
        rules: {
            title: {required: true}
            , startTime: {required: true}
            , meetRoomId: {required: true}
            ,descr:{
                maxlength:200,
            }
        },
        submitHandler: function () {
            addSave();
        }
    });


    function addSave() {
        $.ajax({
            cache: true,
            type: "POST",
            url: "/worktime/editSave",
            data: $("#form-role-add").serializeArray(),
            async: false,
            traditional: true,
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                $.operate.saveSuccess(data);
            }
        });
    }
</script>
</body>
</html>
